<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('component/login/head') %>
</head>

<body id="login">
<div class="container" id="loginVue">
    <div class="row tm-register-row tm-mb-35">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-login-l">
            <form action="" method="post" class="tm-bg-black p-5 h-100">
                <div class="input-field">
                    <input placeholder="使用手机号登录" id="username" name="username" type="text" class="validate"
                           v-model="userLogin.phone">
                </div>
                <div class="input-field mb-5">
                    <input placeholder="密码" id="password" name="password" type="password" class="validate"
                           v-model="userLogin.password">
                </div>
                <div class="tm-flex-lr">
                    <a href="#" class="white-text small">忘记密码了？</a>
                    <button type="button" class="waves-effect btn-large btn-large-white px-4 black-text rounded-0"
                            @click="loginGo">登录
                    </button>
                </div>
            </form>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-login-r">
            <header class="font-weight-light tm-bg-black p-5 h-100">
                <h3 class="mt-0 text-white font-weight-light">登录</h3>
                <p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。</p>
                <p class="mb-0">Node.js 的包管理器 npm,是全球最大的开源库生态系统。</p>
            </header>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 ml-auto mr-0 text-center">
            <a href="/" class="waves-effect btn-large btn-large-white px-4 black-text rounded-0">返回首页</a>
            <a href="/blog.signup" class="waves-effect btn-large btn-large-white px-4 black-text rounded-0">创建新的账号</a>

        </div>
    </div>


</div>

<%- include('component/login/foot') %>
<script>

    const $VXE = VXETable.modal;
    new Vue({
        el: "#loginVue",
        data: {
            userLogin:
                {
                    phone: "",
                    password: ""
                }
        },
        methods: {
            loginGo() {
                XEAjax.post('/blog.login', this.userLogin).then((res) => {
                    if (res.msg === 'f') {
                        $VXE.message({message: '用户名或密码错误！', title: '错误', status: 'error'});
                    } else {
                        $VXE.message({message: '登录成功！五秒后跳转页面！', status: 'loading'});

                        setTimeout(() => {
                            location.href = '/'
                        }, 5000);
                    }
                }).catch((err) => {
                    $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
                });
                //console.log(JSON.stringify(this.userLogin))
            }


        }
    })
</script>
</body>

</html>
